<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>詹园轮播</title>
    <style>
        body{
            background-color: seashell;
        }

        .photo{
            width: 700px;
            height: 400px;
            background-color: skyblue;

            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto auto;
        }
        /* 改变li的样式 */
        li{
            display: block;
            /* 让li从文档流中脱离 */
            position: absolute;
            top: 10px;
            left: 20px

        }
        /* 让a链接和图片分隔
            以下操作都是为了排版
        */
        .b07 a{
            display: block;
            height: 20px;
            width: 20px;
            font-size: 20px;

            position: relative;
            left: 130px; 
            z-index: 1;
        }
        .b06 a{
            display: block;
            height: 20px;
            width: 20px;
            font-size: 20px;

            position: relative;
            left: 110px; 
            z-index: 1;
        }       
        .b05 a{
            display: block;
            height: 20px;
            width: 20px;
            font-size: 20px;

            position: relative;
            left: 90px; 
            z-index: 1;
        }       
        .b04 a{
            display: block;
            height: 20px;
            width: 20px;
            font-size: 20px;

            position: relative;
            left: 70px; 
            z-index: 1;
        }       
        .b03 a{
            display: block;
            height: 20px;
            width: 20px;
            font-size: 20px;

            position: relative;
            left: 50px; 
            z-index: 1;
        }       
        .b02 a{
            display: block;
            height: 20px;
            width: 20px;
            font-size: 20px;

            position: relative;
            left: 30px; 
            z-index: 1;
        }
        .b01 a{
            display: block;
            height: 20px;
            width: 20px;
            font-size: 20px;

            position: relative;
            left: 10px; 
            z-index: 2;
        }
        a:hover{
      
         z-index: 2;
        
        }
        a:active{
      
         z-index: 2;
  
        }
       .b02 a img{
           position: relative;
           left: -20px;
       }
       .b03 a img{
           position: relative;
           left: -40px;
       }
       .b04 a img{
           position: relative;
           left: -60px;
       }
       .b05 a img{
           position: relative;
           left: -80px;
       }
       .b06 a img{
           position: relative;
           left: -100px;
       }
       .b07 a img{
           position: relative;
           left: -120px;
       }

    </style>
</head>
<body>
    <div class="photo">

        <li class="b01">
        
            <!-- a中嵌套图片使得hover时图片能出来 -->

            <a href="#">1
                <img width="500px" height="350px
                " src="./img/詹园1.JPG" alt="">
            </a>
        </li>

        <li class="b02">
           
            
            <a href="#">2
                <img width="500px" height="350px
                " src="./img/詹园2.JPG" alt="">
            </a>
            
        </li>

        <li class="b03">       
            
            <a href="#">3
                <img width="500px" height="350px
            " src="./img/詹园3.JPG" alt="">
            </a>
        </li>

        <li class="b04">
          
            <a href="#">4
                <img width="500px" height="350px
                " src="./img/詹园4.JPG" alt="">
            </a>
        </li>

        <li class="b05">
          
            <a href="#">5
                <img width="500px" height="350px
                " src="./img/詹园5.JPG" alt="">
            </a>
        </li>

        <li class="b06">
            
            <a href="#">6
                <img width="500px" height="350px
            " src="./img/詹园6.JPG" alt="">
            </a>
        </li>

        <li class="b07">
           
            <a href="#">7
                <img width="500px" height="350px
                " src="./img/詹园7.JPG" alt="">
            </a>
        </li>

    </div>
</body>
</html>